<template>

  <div>
    <div class="show-pc">
      <div class="content-frame">
        <a-upload name="avatar" list-type="picture-card" class="avatar-uploader" :show-upload-list="false"
          accept="image/*" :before-upload="beforeUpload">
          <img v-if="avatar" :src="avatar" class="avatar" />
          <div v-else>
            <a-icon :type="loading ? 'loading' : 'plus'" />
            <div class="ant-upload-text">上传头像</div>
          </div>
        </a-upload>
        <a-form :model="userInfo" name="basic" :label-col="{ span: 2 }" :wrapper-col="{ span: 6 }" layout="vertical"
          autocomplete="off" @finish="onFinish">
          <a-form-item label="用户名" name="realname" :rules="[{ required: true, message: '请填写用户名!' }]">
            <a-input v-model:value="userInfo.realname" :disabled="true" />
          </a-form-item>
          <a-form-item label="密码" name="password">
            <a-input-password v-model:value="userInfo.password" placeholder="不修改密码则不填写" :disabled="true"/>
          </a-form-item>
          <a-form-item :wrapper-col="{ offset: 0, span: 6 }">
            <div ref="btnRef">
              <a-button type="primary" html-type="submit">提交</a-button>
            </div>
          </a-form-item>
        </a-form>
        <div :style="{ height: height + 'px' }"></div>
      </div>
    </div>
    <!-- 移动端 -->
    <div class="show-wap">
      <div class="content-frame-wap">
        <a-upload name="avatar" list-type="picture-card" class="avatar-uploader" :show-upload-list="false"
          accept="image/*" :before-upload="beforeUpload">
          <img v-if="avatar" :src="avatar" class="avatar" />
          <div v-else>
            <a-icon :type="loading ? 'loading' : 'plus'" />
            <div class="ant-upload-text">上传头像</div>
          </div>
        </a-upload>
        <a-form :model="userInfo" name="basic" :label-col="{ span: 2 }" :wrapper-col="{ span: 6 }" layout="vertical"
          autocomplete="off" @finish="onFinish">
          <a-form-item label="用户名" name="realname" :rules="[{ required: true, message: '请填写用户名!' }]">
            <a-input v-model:value="userInfo.realname" />
          </a-form-item>
          <a-form-item label="密码" name="password">
            <a-input-password v-model:value="userInfo.password" placeholder="不修改密码则不填写" />
          </a-form-item>
          <a-form-item :wrapper-col="{ offset: 0, span: 6 }">
            <div ref="btnRef">
              <a-button type="primary" html-type="submit">提交</a-button>
            </div>
          </a-form-item>
        </a-form>
        <div :style="{ height: height + 'px' }"></div>
      </div>
    </div>
  </div>

</template>

<script setup>
import { useHttp } from '@/api/http'
import { getUserId, removeToken, removeUserId } from '@/utils/token'
import { message } from 'ant-design-vue'
import { useRouter } from 'vue-router'
import { BASEURL } from '@/utils/const'
import { onMounted } from 'vue'

const btnRef = ref(null)
const height = ref(0)
const getHeight = () => {
  const rect = btnRef.value.getBoundingClientRect();
  let height1 = window.innerHeight - (rect.top + 32 + 24 + innerWidth / 100 * (7.9)) - 50 - 20
  height.value = height1
}
onMounted(() => {
  getHeight()
})

const router = useRouter()

const userInfo = ref({})
const avatar = ref('')
const form = ref({

})

useHttp.get('/web/my/heUser', {
  heUserId: getUserId()
}).then((res) => {
  if (res.code === 200) {
    userInfo.value = res.result
    avatar.value = res.result.avatar
  }
})

const onFinish = (values) => {
  useHttp.post('/web/my/updateUser', userInfo.value).then(res => {
    console.log(res)
    if (res.code === 200) {
      message.success('保存成功')
      router.go(0);
    }
  })
}


const beforeUpload = (file) => {
  // 创建formData对象
  const formData = new FormData();
  formData.append('file', file);

  // 使用fetch API上传图片
  fetch(BASEURL + '/sys/common/upload', {
    method: 'POST',
    body: formData,
    headers: {
      'x-access-token': getToken(),
    }
  }).then(response => response.json())
    .then(data => {
      userInfo.value.avatar = data.message
      avatar.value = BASEURL + '/sys/common/static/' + userInfo.value.avatar
    })
    .catch((error) => console.error('Error:', error));
}
</script>

<style scope>
.content-frame {
  margin: 2.6vw 0;
  padding: 1.0vw 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transform: translateX(calc(50vw - 12.5vw));
}

.avatar-uploader {
  /* transform: translateX(calc(12.5vw - 50px)); */
}

.avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ant-upload {
  margin: 0 auto;
}

.ant-upload-picture-card-wrapper {
  width: auto !important;
}

/* 手机 */
.content-frame-wap {
  width: 95%;
  margin: 0 auto;
}
</style>